<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<style>
    .container {
        height: 10px;
        border-radius: 5px;
        border: 1px solid black;
    }

    .progress {
        height: 100%;
        width: 0;
        background: red;
    }
</style>

<body>
    <div id="app">
        <button @click="handleVideo">{{isPlay ?"暂停":"播放"}}</button>
        <button @click="replay">重播</button>
        <div class="container">
            <div class="progress" :style="{width:progress+'px'}"></div>
        </div>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            progress: 0,
            isPlay: false,
            timer: null,
            totalTime: 3000
        },
        methods: {
            handlerProgress(pre) {
                console.log("handlerProgress")
                if (pre < 100) return pre + 1
                else {
                    alert("end")
                    return 0
                }
            },
            replay() {
                console.log("replay")
                this.isPlay = true
                if (this.timer) clearInterval(this.timer)
                this.progress = 0
                this.timer = setInterval(() => {
                    this.progress = this.handlerProgress(this.progress)
                }, this.totalTime / 100
                )
            },
            handleVideo() {
                console.log('handleVideo')
                this.isPlay ? clearInterval(this.timer) : this.timer = setInterval(() => {
                    return this.progress = this.handlerProgress(this.progress)
                }, this.totalTime / 100)
                this.isPlay = !this.isPlay
            }
        }
    })

</script>

</html>